<template>
    <!-- 
        desc : 分页组件
        auth :liufang
        date : 2021/01/11
        params : {
            total : 总条数
            pageSize :  分页条数
            pageIndex : 当前页
        }
        function :{
            handleSizeChange : 改变分页条数
            handleCurrentChange ： 改变当前页
        }
     -->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="[6,10,12,50,100,200,500,1000]"
        :page-size="pageSize" layout="total,sizes,prev, pager, next, jumper" :total="total" class="ui_pagination">
    </el-pagination>
</template>
<style scoped>
.ui_pagination{
    clear: both;
    margin-top: 10px;
    text-align: right;
    margin-right: 10px;  
}
.ui_pagination >>> .el-pager li.active{
    background: #08A14B !important;
}
.ui_pagination >>> .el-pager li:hover{
    color: #08A14B !important;
}
.ui_pagination >>> .el-pager li.active:hover{
    color: #fff !important;
}
</style>
<script>
export default {
    props :{
        total: {
            type: Number,
            default: 0
        },
        pageSize: {
            type: Number,
            // default: 6
        }, 
        pageIndex: {
            type: Number,
            default: 1
        }
    }, 
    methods : {
        /**
         * 改变查询条数
         */
        handleSizeChange(val) {
            this.$emit('handleSizeChange', val);
        },
        /**
         * 改变页码
         */
        handleCurrentChange(val) {
            this.$emit('handleCurrentChange', val);
        }
    }
}
</script>